import { IUI, Text } from 'leafer-ui'
import { ref } from 'vue'
import { board } from './uiItems'

/**
 * 获取dom辅助函数
 * @param {string} sel 选择器
 * @returns 只匹配到一个元素时返回该元素，匹配到多个元素时返回数组，没有匹配到则返回空数组
 */
export function $(sel: string) {
    return board.findOne(sel)
}

/**
 * 获取16进制的字符串或者原字符串
 * @param {number | string} val
 * @returns 如果参数是一个数字则返回16进制，否则返回参数
 */
export function getHex(val: number | string) {
    if (typeof val !== 'number') {
        return val
    }
    return '0x' + val.toString(16).replace('-', '')
}

/**
 * 获取一个内存项的html
 * @param {string} add 内存地址
 * @param {string | number} val 内存的值
 * @returns 返回一个memory-item的dom
 */
export const getMemoryItem = (
    target: IUI,
    add: string | number,
    val: string | number
) => {
    let item = target.clone()
    let addTextItem = item.find('.add')[0] as Text
    let valTextItem = item.find('.val')[0] as Text

    const hexAdd = getHex(add)

    // 内存项
    item.className = `memory-${hexAdd}`
    // 地址box和值box
    addTextItem.parent!.className = `memory-${hexAdd}.add.box`
    valTextItem.parent!.className = `memory-${hexAdd}.val.box`
    // 地址和值text
    addTextItem.className = `memory-${hexAdd}.add.text`
    valTextItem.className = `memory-${hexAdd}.val.text`

    valTextItem.text = getHex(val)
    addTextItem.text = hexAdd
    addTextItem.width = 100

    return item

    console.log(addTextItem, valTextItem)
    // let dom = document.createElement('DIV')
    // let addDom = document.createElement('DIV')
    // let valDom = document.createElement('DIV')
    // dom.className = `memory-item memory-${getHex(add)}`

    // valDom.className = 'val'
    // valDom.textContent = getHex(val)

    // addDom.className = 'add'
    // addDom.textContent = getHex(add)

    // dom.appendChild(addDom)
    // dom.appendChild(valDom)
    // return dom
}

export const infoText = ref('')
export const outputText = ref('')

export function setInfo(val = '') {
    infoText.value = val
}
export function setOutput(val: string | number) {
    outputText.value = `${val}`
}
